<script setup lang="ts">
import { ref } from 'vue'
import { SidebarTrigger } from '@/components/ui/sidebar'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'

// 用户信息
const userInfo = ref({
  nickname: '',
  email: '',
  avatar: '',
  joinDate: ''
})

// 是否首次设置
const isFirstTime = ref(true)

// 是否已注册
const isRegistered = ref(false)
const fileInput = ref<HTMLInputElement>()

// 头像上传
const handleAvatarUpload = (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  if (file) {
    const reader = new FileReader()
    reader.onload = (e) => {
      userInfo.value.avatar = e.target?.result as string
    }
    reader.readAsDataURL(file)
  }
}

// 触发文件选择
const triggerFileUpload = () => {
  fileInput.value?.click()
}

// 保存用户信息
const saveUserInfo = () => {
  if (isFirstTime.value && userInfo.value.nickname && userInfo.value.email) {
    userInfo.value.joinDate = new Date().toLocaleDateString('zh-CN')
    isFirstTime.value = false
    isRegistered.value = true
  }
  // 这里可以添加保存到后端的逻辑
  console.log('保存用户信息:', userInfo.value)
}
</script>

<template>
  <div class="page">
    <header class="header">
      <SidebarTrigger />
      <h1>用户中心</h1>
    </header>
    <main class="content">
      <div class="user-container">
        <!-- 用户头像区域 -->
        <div class="user-avatar-section">
          <div class="user-avatar" @click="triggerFileUpload">
            <img v-if="userInfo.avatar" :src="userInfo.avatar" alt="用户头像" class="avatar-image" />
            <div v-else class="avatar-placeholder">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
              </svg>
            </div>
            <div class="avatar-overlay">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
                <circle cx="12" cy="13" r="4"></circle>
              </svg>
              <span>{{ userInfo.avatar ? '更换头像' : '上传头像' }}</span>
            </div>
          </div>
          <input 
            ref="fileInput" 
            type="file" 
            accept="image/*" 
            @change="handleAvatarUpload" 
            style="display: none;"
          />
        </div>

        <!-- 用户信息区域 -->
        <div class="user-info-section">
          <div class="user-info-card">
            <div class="info-item">
               <label class="info-label">角色名称</label>
               <div class="info-value">
                 <Input 
                   v-if="!isRegistered"
                   v-model="userInfo.nickname" 
                   placeholder="请输入昵称"
                   class="edit-input"
                 />
                 <span v-else class="readonly-text">{{ userInfo.nickname }}</span>
               </div>
             </div>
             <div class="info-item">
                <label class="info-label">绑定QQ</label>
                <div class="info-value">
                  <Input 
                    v-if="!isRegistered"
                    v-model="userInfo.email" 
                    type="text"
                    placeholder="请输入QQ号"
                    class="edit-input"
                  />
                  <span v-else class="readonly-text">{{ userInfo.email }}</span>
                </div>
              </div>
            <div class="info-item" v-if="userInfo.joinDate">
              <label class="info-label">注册时间</label>
              <div class="info-value">{{ userInfo.joinDate }}</div>
            </div>
            
            <!-- 操作按钮 -->
              <div class="action-buttons" v-if="!isRegistered">
                <Button @click="saveUserInfo" :disabled="!userInfo.nickname || !userInfo.email" class="btn">
                  确认注册
                </Button>
              </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<style scoped>
.page {
  min-height: 100vh;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

.dark .page {
  background-color: #111318;
}

.header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
  border-bottom: 1px solid hsl(var(--sidebar-border));
  background: hsl(var(--sidebar-background));
  color: hsl(var(--sidebar-foreground));
}

.header h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: hsl(var(--sidebar-foreground));
}

.content {
  flex: 1;
  padding: 2rem;
  background-color: hsl(var(--background));
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 4rem);
  width: 100%;
  padding-bottom: 8rem;
}

.dark .content {
  background-color: #14151d;
}

.user-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  max-width: 500px;
}

/* 用户头像区域样式 */
.user-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.user-avatar {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid hsl(var(--primary));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.user-avatar:hover {
  transform: scale(1.05);
}

.user-avatar:hover .avatar-overlay {
  opacity: 1;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
  gap: 0.5rem;
}

.avatar-overlay span {
  font-size: 0.75rem;
  font-weight: 500;
}

/* 用户信息区域样式 */
.user-info-section {
  width: 100%;
  display: flex;
  justify-content: center;
}

.user-info-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 500px;
}

.dark .user-info-card {
  background: #1e2022;
  border-color: #2a2d31;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid hsl(var(--border));
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  min-width: 80px;
}

.info-value {
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  font-weight: 500;
  text-align: left;
}

.edit-input {
  width: 100%;
  max-width: 300px;
  border: none;
  border-bottom: 2px solid hsl(var(--border));
  border-radius: 0;
  background: transparent;
  padding: 0.5rem 0;
  font-size: 1rem;
  transition: border-color 0.3s ease;
  text-align: center;
}

.edit-input:focus {
  border-bottom-color: hsl(var(--primary));
  box-shadow: none;
  outline: none;
}

.edit-input::placeholder {
  color: hsl(var(--muted-foreground));
  opacity: 0.7;
  font-style: italic;
}

.readonly-text {
  color: hsl(var(--foreground));
  font-weight: 500;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
}

.action-buttons {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

.action-buttons .btn {
  min-width: 150px;
  padding: 0.75rem 2rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .content {
    padding: 1rem;
  }

  .user-container {
    gap: 1.5rem;
    max-width: 100%;
  }

  .user-info-card {
    padding: 1.5rem;
  }

  .info-item {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .info-label {
    margin-bottom: 0.25rem;
  }

  .edit-input {
    max-width: 100%;
  }

  .action-buttons .btn {
    min-width: 100%;
    max-width: 300px;
  }
}
</style>